<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">


    <style>
        .contain {
            flex-direction: column;

            .contain-tool {
                height: 0.62rem;
                width: calc(100% - 0.5rem);
                margin: 0.2rem 0.25rem 0;
                background-color: #23434E;
                display: flex;
                align-items: center;

                .tool-switch {
                    padding: 0 0.1rem;
                    background-color: #1A3A45;
                    border: 1px solid #84DDD0;
                    border-radius: 0.04rem;
                    height: 0.3rem;
                    line-height: 0.3rem;
                    margin: 0 0.13rem;
                    cursor: pointer;
                    color: #84DDD0;
                }
            }

            .contain-toolle {
                width: calc(100% - 0.5rem);
                margin: 0.2rem 0.25rem;
                height: calc(100% - 1.2rem);

                .toolle-top {
                    width: 100%;
                    height: 62%;
                    display: flex;

                    .top-left {
                        height: 100%;
                        width: 63%;
                        margin-right: 2%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .left-number {
                            height: 26%;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;

                            .number-item {
                                height: 100%;
                                width: 30%;
                                background-size: 99% 99%;
                                background-position: center;
                                background-repeat: no-repeat;
                                background-color: #0E262D;
                                filter: drop-shadow(2px 2px 4px #00000099);
                                position: relative;
                                display: flex;
                                justify-content: center;
                                flex-direction: column;
                                padding-left: 0.6rem;
                                color: #B3DBD5;

                                span {
                                    font-size: 0.26rem;
                                    color: #4DFFE5;
                                    margin-bottom: 0.15rem;
                                }

                            }


                            .number-item:nth-child(1) {
                                background-image: url(../static/img/s1.png);
                            }

                            .number-item:nth-child(3) {
                                background-image: url(../static/img/s2.png);
                            }

                            .number-item:nth-child(2) {
                                background-image: url(../static/img/s3.png);
                            }
                        }

                        .left-chart {
                            height: 70%;
                            width: 100%;
                            background-color: #0E262D;
                            filter: drop-shadow(2px 2px 4px #00000099);

                            .left-chart-tool {
                                width: 100%;
                                height: 0.4rem;
                                display: flex;
                                align-items: center;
                                justify-content: end;
                                color: #30a0db;

                                span {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;
                                    text-indent: 0;
                                    color: #fff;
                                    padding: 0.02rem 0.2rem;
                                }

                                span.active {
                                    background: linear-gradient(4deg, rgba(85, 215, 207, 0.75) 0%, rgba(17, 189, 172, 0.61) 100%);
                                    border-radius: 0.1rem;
                                }


                            }

                            #left-chart {
                                width: 100%;
                                height: calc(100% - 0.4rem);
                            }
                        }

                    }

                    .top-right {
                        height: 100%;
                        width: 35%;
                        background-color: #0E262D;
                        filter: drop-shadow(2px 2px 4px #00000099);

                    }
                }

                .toolle-bottom {
                    width: 100%;
                    height: 33%;
                    margin-top: calc(5% - 0.5rem);
                    background-color: #0E262D;
                    filter: drop-shadow(2px 2px 4px #00000099);

                    >div {
                        width: 100%;
                        height: calc(100% / 7);
                        display: flex;

                        li {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }

                    >div:nth-child(1) {
                        background: rgba(48, 146, 163, 0.4);

                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">

            </div>
        </div>
        <div class="contain">
            <div class="contain-tool">
                <div class="tool-switch" id="tool-year">年度</div>
                <div class="tool-switch" id="tool-month">月度</div>
                <div class="tool-switch" id="tool-customize">自定义</div>
            </div>
            <div class="contain-toolle">
                <div class="toolle-top">
                    <div class="top-left">
                        <div class="left-number">

                        </div>
                        <div class="left-chart">
                            <div class="left-chart-tool">
                                <span data-type='' class="active">全部</span>
                                <span data-type=1>爬绳</span>
                                <span data-type=2>挂钩梯攀爬</span>
                                <span data-type=3>号操</span>
                                <span data-type=4>负重登10楼</span>
                                <span data-type=5>室内体能</span>
                                <span data-type=6>一人扶梯一人爬</span>
                            </div>
                            <div id="left-chart"></div>

                        </div>

                    </div>
                    <div class="top-right" id="top-right"></div>

                </div>
                <div class="toolle-bottom">

                </div>

            </div>
        </div>
    </div>



    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/util/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/trainStatistics.js"></script>
</body>

</html>